<template>
  <div class="p-6">
    <el-card>
      <div class="flex justify-between items-center mb-4">
        <el-input
          v-model="search"
          placeholder="搜索学科"
          clearable
          style="width: 250px"
        />
        <!-- 返回按钮 -->
        <el-button type="primary" @click="goBack"> 返回 </el-button>
        <el-button type="primary" @click="openDialog()">新增学科</el-button>
      </div>

      <!-- ✅ 加了 border、table-layout -->
      <el-table
        :data="filteredSubjects"
        border
        style="width: 100%; table-layout: fixed"
      >
        <el-table-column prop="id" label="ID" align="left" />
        <el-table-column
          prop="questionsSubject"
          label="学科名称"
          align="left"
        />
        <el-table-column label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog(row)"
              >编辑</el-button
            >
            <el-button type="danger" link @click="handleDelete(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
      :title="editForm.id ? '编辑学科' : '新增学科'"
      v-model="dialogVisible"
      width="400px"
    >
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="editForm.questionsSubject" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getSubjects,
  addSubject,
  updateSubject,
  deleteSubject,
} from "../api/subject.js";
import { useRouter } from "vue-router";

const router = useRouter();

const subjects = ref([]);
const dialogVisible = ref(false);
const editForm = ref({ id: null, questionsSubject: "" });
const search = ref("");

const filteredSubjects = computed(() =>
  subjects.value.filter((sub) =>
    sub.questionsSubject
      .toLowerCase()
      .includes(search.value.trim().toLowerCase())
  )
);

const goBack = () => {
  router.back(); // 返回上一级页面
  // 或者跳转到首页： router.push("/api/redirect");
};

const fetchSubjects = async () => {
  try {
    const res = await getSubjects();
    subjects.value = res.data;
  } catch {
    ElMessage.error("获取学科失败");
  }
};

const openDialog = (subject = { id: null, questionsSubject: "" }) => {
  editForm.value = { ...subject };
  dialogVisible.value = true;
};

const submitForm = async () => {
  try {
    if (editForm.value.id) {
      await updateSubject(editForm.value);
      ElMessage.success("更新成功");
    } else {
      await addSubject(editForm.value);
      ElMessage.success("添加成功");
    }
    dialogVisible.value = false;
    fetchSubjects();
  } catch {
    ElMessage.error("操作失败");
  }
};

const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm("确认删除该学科？", "提示", { type: "warning" });
    await deleteSubject(id);
    ElMessage.success("删除成功");
    fetchSubjects();
  } catch {
    ElMessage.info("取消删除");
  }
};

onMounted(() => fetchSubjects());
</script>

